<template>
	<div class="lottery lottery-page " :class="btmShow?'lottery-toggle':''">
		<van-nav-bar :border="false" :placeholder="true" :fixed="true" left-arrow @click-left="onClickLeft">
			<template #right>
				<div class="iconfont rightIcon icon-icon_chat"></div>
				<div @click="menushow = true" class="iconfont rightIcon icon-icon_sidebar"></div>
			</template>
		</van-nav-bar>
		<div class="scrollList" ref="scrollList">
			<div class="wrapper-tontent">
				<div class="openResult">
					<div class="top">
						<div class="selectAllLottery" @click="url('/allGameSelect')"><span class="">Miền Bắc VIP 45
								giây</span><span class="iconfont icon-icon_drop_down_solid"></span></div>
						<div @click="url('/historyData')" class="dataBtn"><span class="iconfont icon-icon_data"></span>
							Số liệu </div>
					</div>
					<div class="issue">
						<div class="issueText"><span> số kỳ mở thưởng</span><i>202111131667</i></div>
						<div class="status">Đang mở kèo</div>
					</div>
					<van-count-down :time="time">
						<template #default="timeData">
							<span class="block">{{ timeData.hours }}</span>
							<span class="colon">:</span>
							<span class="block">{{ timeData.minutes }}</span>
							<span class="colon">:</span>
							<span class="block">{{ timeData.seconds }}</span>
						</template>
					</van-count-down>
				</div>
				<!-- kenoBet -->
				<div class="kenoBet">
					<div  class="kenoOpneResult" >
						<div >
							<div class="koTitle">
								<div class="pastResult"><span class="lable">Kỳ
									</span><span class="Issue">202111180553</span></div>
								<div class="classification">
									<div class="classItem  big">Xỉu</div>
									<div class="classItem  odd">Chẵn</div>
									<div class="classItem  down">Trên</div>
									<div class="classItem  earth">Thuỷ</div>
								</div><i class="van-icon van-icon-info-o" style="font-size: 20px;"></i>
							</div>
							<div class="resultList">
								<div class="resultNum">
									<ul class="codeList">
										<li data-index="0" class="code staggered-fade-enter-to"
											><span > 16</span></li>
										<li data-index="1" class="code" ><span
												> 17</span></li>
										<li data-index="2" class="code" ><span
												> 18</span></li>
										<li data-index="3" class="code" ><span
												> 20</span></li>
										<li data-index="4" class="code" ><span
												> 21</span></li>
										<li data-index="5" class="code" ><span
												> 22</span></li>
										<li data-index="6" class="code" ><span
												> 23</span></li>
										<li data-index="7" class="code" ><span
												> 31</span></li>
										<li data-index="8" class="code" ><span
												> 39</span></li>
										<li data-index="9" class="code" ><span
												> 41</span></li>
										<li data-index="10" class="code" ><span
												> 54</span></li>
										<li data-index="11" class="code" ><span
												> 57</span></li>
										<li data-index="12" class="code" ><span
												> 63</span></li>
										<li data-index="13" class="code" ><span
												> 69</span></li>
										<li data-index="14" class="code" ><span
												> 70</span></li>
										<li data-index="15" class="code" ><span
												> 73</span></li>
										<li data-index="16" class="code" ><span
												> 74</span></li>
										<li data-index="17" class="code" ><span
												> 76</span></li>
										<li data-index="18" class="code" ><span
												> 77</span></li>
										<li data-index="19" class="code" ><span
												> 78</span></li>
									</ul>
								</div>
								<div class="resultSum"> 0 </div>
							</div>
						</div>
						<!---->
					</div>
					<ul  class="row">
						<li >
							<div  class="title">Lớn Nhỏ Chẵn Lẻ</div>
							<ul  class="ballBox">
								<li class="flex1" v-for="(item,index) in ballBoxA" @click="toggleA(index)" :key="index" :class="item.check?'active':''" >
									<p >{{item.label}}</p>
									<p >{{item.value}}</p>
								</li>
							</ul>
						</li>
						<li >
							<div  class="title">Trên hoà dưới</div>
							<ul  class="ballBox">
								<li  v-for="(item,index) in ballBoxB" @click="toggleB(index)" :key="index" :class="item.check?'active':''" >
									<p >{{item.label}}</p>
									<p >{{item.value}}</p>
								</li>
							</ul>
						</li>
						<li >
							<div  class="title">Cược gộp</div>
							<ul  class="ballBox">
								<li class="flex1" v-for="(item,index) in ballBoxC" @click="toggleC(index)" :key="index" :class="item.check?'active':''" >
									<p >{{item.label}}</p>
									<p >{{item.value}}</p>
								</li>
							</ul>
						</li>
						<li >
							<div  class="title">Ngũ hành</div>
							<ul  class="ballBox">
								<li  v-for="(item,index) in ballBoxD" @click="toggleD(index)" :key="index" :class="item.check?'active':''" >
									<p >{{item.label}}</p>
									<p >{{item.value}}</p>
								</li>
							</ul>
						</li>
					</ul>
					<div class="kenoTableData">
						<van-tabs v-model="tabactive" background="#1b233d" title-active-color="#ffffff" title-inactive-color="#ffffff">
							<van-tab title="Tài xỉu">
								<div class="kenoTableTitle">
									<div class="titles circle0"><span  class="lable labele-red">Tài</span>
										<van-circle  stroke-width="80" color="#f94168"  layer-color="#48516f" v-model="currentRate" :rate="30" :speed="100" :text="text" >
											<p style="color: #f94168;" class="circle">34%</p>
										</van-circle>
									</div>
									<div class="titles circle1"><span class="lable lable-blue">Xỉu</span>
										<van-circle  stroke-width="80" color="#26a1ff"  layer-color="#48516f" v-model="currentRate" :rate="30" :speed="100" :text="text" >
											<p style="color: #26a1ff;" class="circle">34%</p>
										</van-circle>
									</div>
								</div>
								<div class="tableData">
									<div class="tableItem">
										<div class="tableDataList" v-for="(item,index) in tableDataList" :key="index">
											<div class="list" v-for="subitem in item.sublist" :key="subitem">
												<div class="popper" >(Xỉu)202111182938 </div>
												<span class="items" :class="subitem.skin">{{subitem.label}}</span>
											</div>
										</div>
									</div>
								</div>
							</van-tab>
							<van-tab title="Lẻ chẵn">
								<div class="kenoTableTitle">
									<div class="titles circle0"><span  class="lable labele-red">Tài</span>
										<van-circle  stroke-width="80" color="#f94168"  layer-color="#48516f" v-model="currentRate" :rate="30" :speed="100" :text="text" >
											<p style="color: #f94168;" class="circle">34%</p>
										</van-circle>
									</div>
									<div class="titles circle1"><span class="lable lable-blue">Xỉu</span>
										<van-circle  stroke-width="80" color="#26a1ff"  layer-color="#48516f" v-model="currentRate" :rate="30" :speed="100" :text="text" >
											<p style="color: #26a1ff;" class="circle">34%</p>
										</van-circle>
									</div>
								</div>
								<div class="tableData">
									<div class="tableItem">
										<div class="tableDataList" v-for="(item,index) in tableDataList" :key="index">
											<div class="list" v-for="subitem in item.sublist" :key="subitem">
												<div class="popper" >(Xỉu)202111182938 </div>
												<span class="items" :class="subitem.skin">{{subitem.label}}</span>
											</div>
										</div>
									</div>
								</div>
							</van-tab>
							<van-tab title="Trên hoà dưới">
								<div class="kenoTableTitle">
									<div class="titles circle0"><span  class="lable labele-red">Tài</span>
										<van-circle  stroke-width="80" color="#f94168"  layer-color="#48516f" v-model="currentRate" :rate="30" :speed="100" :text="text" >
											<p style="color: #f94168;" class="circle">34%</p>
										</van-circle>
									</div>
									<div class="titles circle1"><span class="lable lable-gray">Hoà</span>
										<van-circle  stroke-width="80" color="#c0c4cc"  layer-color="#48516f" v-model="currentRate" :rate="30" :speed="100" :text="text" >
											<p style="color: #c0c4cc;" class="circle">34%</p>
										</van-circle>
									</div>
									<div class="titles circle1"><span class="lable lable-blue">Xỉu</span>
										<van-circle  stroke-width="80" color="#26a1ff"  layer-color="#48516f" v-model="currentRate" :rate="30" :speed="100" :text="text" >
											<p style="color: #26a1ff;" class="circle">34%</p>
										</van-circle>
									</div>
								</div>
								<div class="tableData">
									<div class="tableItem">
										<div class="tableDataList" v-for="(item,index) in tableDataList" :key="index">
											<div class="list" v-for="subitem in item.sublist" :key="subitem">
												<div class="popper" >(Xỉu)202111182938 </div>
												<span class="items" :class="subitem.skin">{{subitem.label}}</span>
											</div>
										</div>
									</div>
								</div>
							</van-tab>
							<van-tab title="Ngũ hành">
								<div class="kenoTableTitle">
									<div class="titles circle0"><span  class="lable labele-yellow">Tài</span>
										<van-circle  stroke-width="80" color="#ffbb00"  layer-color="#48516f" v-model="currentRate" :rate="30" :speed="100" :text="text" >
											<p style="color: #ffbb00;" class="circle">34%</p>
										</van-circle>
									</div>
									<div class="titles circle1"><span class="lable lable-green">Xỉu</span>
										<van-circle  stroke-width="80" color="#6dd400"  layer-color="#48516f" v-model="currentRate" :rate="30" :speed="100" :text="text" >
											<p style="color: #6dd400;" class="circle">34%</p>
										</van-circle>
									</div>
									<div class="titles circle2"><span  class="lable labele-blue">Tài</span>
										<van-circle  stroke-width="80" color="#26a1ff"  layer-color="#48516f" v-model="currentRate" :rate="30" :speed="100" :text="text" >
											<p style="color: #26a1ff;" class="circle">34%</p>
										</van-circle>
									</div>
									<div class="titles circle3"><span class="lable lable-red">Xỉu</span>
										<van-circle  stroke-width="80" color="#f94168"  layer-color="#48516f" v-model="currentRate" :rate="30" :speed="100" :text="text" >
											<p style="color: #f94168;" class="circle">34%</p>
										</van-circle>
									</div>
									<div class="titles circle4"><span  class="lable labele-brown">Tài</span>
										<van-circle  stroke-width="80" color="#ca8c10"  layer-color="#48516f" v-model="currentRate" :rate="30" :speed="100" :text="text" >
											<p style="color: #ca8c10;" class="circle">34%</p>
										</van-circle>
									</div>
								</div>
								<div class="tableData">
									<div class="tableItem">
										<div class="tableDataList" v-for="(item,index) in tableDataListD" :key="index">
											<div class="list" v-for="subitem in item.sublist" :key="subitem">
												<div class="popper" >(Xỉu)202111182938 </div>
												<span class="items" :class="subitem.skin">{{subitem.label}}</span>
											</div>
										</div>
									</div>
								</div>
							</van-tab>
						</van-tabs>
					</div>
				</div>
			</div>
		</div>
		<!-- 菜单 -->
		<van-popup v-model="menushow" position="right" :style="{ height: '100%' }">
			<div class="rightMenu">
				<div class="userInfoBox">
					<div class="avatar-container">
						<van-uploader v-model="fileList" multiple :max-count="1" preview-size="60px">
							<template>
								<div class="van-uploader__input-wrapper"><img class="avatar-img"
										src="../../assets/images/default_chat.png" lazy="loaded"
										style="width: 60px; height: 60px;"></div>
							</template>
						</van-uploader>
						<i class="iconfont icon-icon_edit_avatar"></i>
					</div>
					<div class="money">99,541,000 <span>VND</span></div>
					<div class="username">xiaobao</div>
					<div class="btnBox">
						<button type="button">Rút tiền</button>
						<button type="button">Nạp tiền</button>
					</div>
				</div>
				<div class="menuListBox">
					<van-cell is-link to="/">Lịch sử giao dịch</van-cell>
					<van-cell is-link to="/">Lịch sử</van-cell>
					<van-cell is-link to="/">Chi tiết</van-cell>
					<van-cell is-link to="/">Cách chơi</van-cell>
					<van-cell is-link to="/">Nạp tiền</van-cell>
					<van-cell is-link to="/">Trở về trang chủ</van-cell>
					<van-cell is-link to="/">Thoát an toàn</van-cell>
				</div>
			</div>
		</van-popup>
		<van-popup v-model="btmShow" position="bottom">
			<div class="betConfirmPop">
				<div class="title">
					<div class="defMoney">
						<span>Mặc định <i>1,000</i></span><i class="van-icon van-icon-edit"></i>
					</div>
					<div class="balance">
						<span>Số dư <i>99,541,000</i></span>
					</div>
				</div>
				<div class="quickSelect">
					<div class="moneyItem" @click="onTabquic(item.value)" v-for="(item,index) in tabsquic" :key="index"
						:class="quickcur == index?'active':''">
						{{item.label}}
					</div>
				</div>
				<div class="betInfo">
					<div class="inputGroup">
						<div class="flex-center"><span>Số đơn cược<i>54</i></span></div>
						<div class="flex-center"><span>Số đơn cược<i>1</i><i>X</i></span><input type="tel"
								v-model="betVal"></div>
					</div>
					<div class="btnGroup">
						<button type="button" @click="cancel" class="cancelBtn">Huỷ đơn</button>
						<van-button class="betBtn">Đặt Cược<br>162,000</van-button>
					</div>
				</div>
			</div>
		</van-popup>
	</div>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				tabactive: 0,
				menushow: false,
				btmShow: false,
				time: 30 * 60 * 60 * 1000,
				ballBoxA: [
					{check: false,label: 'Tài',value: '1.95',},
					{check: false,label: 'Xỉu',value: '0',},
					{check: false,label: 'Lẻ',value: '0',},
					{check: false,label: 'Chẵn',value: '0',},
				],
				ballBoxB: [
					{check: false,label: 'Trên',value: '1.95',},
					{check: false,label: 'Hoà',value: '0',},
					{check: false,label: 'Dưới',value: '0',},
				],
				ballBoxC: [
					{check: false,label: 'Tài lẻ',value: '1.95',},
					{check: false,label: 'Xỉu lẻ',value: '0',},
					{check: false,label: 'Tài chẵn',value: '0',},
					{check: false,label: 'Xỉu chẵn',value: '0',},
				],
				ballBoxD: [
					{check: false,label: 'Kim',value: '1.95',},
					{check: false,label: 'Mộc',value: '0',},
					{check: false,label: 'Thuỷ',value: '0',},
					{check: false,label: 'Hoả',value: '0',},
					{check: false,label: 'Thổ',value: '0',},
				],
				tableDataList:[
					{
						sublist:[
							{
								label:'T',
								skin:'items-blue'
							},
							{
								label:'T',
								skin:'items-blue'
							},
							{
								label:'T',
								skin:'items-blue'
							}
						]
					},
					{
						sublist:[
							{
								label:'X',
								skin:'items-red'
							},
							{
								label:'X',
								skin:'items-red'
							},
							{
								label:'X',
								skin:'items-red'
							},
							{
								label:'X',
								skin:'items-red'
							}
						]
					},{
						sublist:[
							{
								label:'T',
								skin:'items-blue'
							}
						]
					},
					{
						sublist:[
							{
								label:'X',
								skin:'items-red'
							}
						]
					},{
						sublist:[
							{
								label:'T',
								skin:'items-blue'
							}
						]
					},
					{
						sublist:[
							{
								label:'X',
								skin:'items-red'
							}
						]
					},{
						sublist:[
							{
								label:'T',
								skin:'items-blue'
							},
							{
								label:'T',
								skin:'items-blue'
							}
						]
					},
					{
						sublist:[
							{
								label:'X',
								skin:'items-red'
							},
							{
								label:'X',
								skin:'items-red'
							}
						]
					},{
						sublist:[
							{
								label:'T',
								skin:'items-blue'
							},
							{
								label:'T',
								skin:'items-blue'
							}
						]
					},
					{
						sublist:[
							{
								label:'X',
								skin:'items-red'
							},
							{
								label:'X',
								skin:'items-red'
							}
						]
					},{
						sublist:[
							{
								label:'T',
								skin:'items-blue'
							},
							{
								label:'T',
								skin:'items-blue'
							}
						]
					},
					{
						sublist:[
							{
								label:'X',
								skin:'items-red'
							},
							{
								label:'X',
								skin:'items-red'
							}
						]
					},{
						sublist:[
							{
								label:'T',
								skin:'items-blue'
							},
							{
								label:'T',
								skin:'items-blue'
							}
						]
					},
					{
						sublist:[
							{
								label:'X',
								skin:'items-red'
							}
						]
					},{
						sublist:[
							{
								label:'T',
								skin:'items-blue'
							}
						]
					},
					{
						sublist:[
							{
								label:'X',
								skin:'items-red'
							}
						]
					},{
						sublist:[
							{
								label:'T',
								skin:'items-blue'
							}
						]
					},
					{
						sublist:[
							{
								label:'X',
								skin:'items-red'
							}
						]
					},
				],
				tableDataListD:[
					{
						sublist:[
							{
								label:'T',
								skin:'items-green'
							},
							{
								label:'T',
								skin:'items-green'
							},
							{
								label:'T',
								skin:'items-green'
							}
						]
					},
					{
						sublist:[
							{
								label:'X',
								skin:'items-yellow'
							},
							{
								label:'X',
								skin:'items-yellow'
							},
							{
								label:'X',
								skin:'items-yellow'
							},
							{
								label:'X',
								skin:'items-yellow'
							}
						]
					},{
						sublist:[
							{
								label:'T',
								skin:'items-brown'
							}
						]
					},
					{
						sublist:[
							{
								label:'X',
								skin:'items-red'
							}
						]
					},{
						sublist:[
							{
								label:'T',
								skin:'items-brown'
							}
						]
					},
					{
						sublist:[
							{
								label:'X',
								skin:'items-red'
							}
						]
					},{
						sublist:[
							{
								label:'T',
								skin:'items-blue'
							},
							{
								label:'T',
								skin:'items-blue'
							}
						]
					},
					{
						sublist:[
							{
								label:'X',
								skin:'items-red'
							},
							{
								label:'X',
								skin:'items-red'
							}
						]
					},{
						sublist:[
							{
								label:'T',
								skin:'items-blue'
							},
							{
								label:'T',
								skin:'items-blue'
							}
						]
					},
					{
						sublist:[
							{
								label:'X',
								skin:'items-red'
							},
							{
								label:'X',
								skin:'items-red'
							}
						]
					},{
						sublist:[
							{
								label:'T',
								skin:'items-blue'
							},
							{
								label:'T',
								skin:'items-blue'
							}
						]
					},
					{
						sublist:[
							{
								label:'X',
								skin:'items-red'
							},
							{
								label:'X',
								skin:'items-red'
							}
						]
					},{
						sublist:[
							{
								label:'T',
								skin:'items-blue'
							},
							{
								label:'T',
								skin:'items-blue'
							}
						]
					},
					{
						sublist:[
							{
								label:'X',
								skin:'items-red'
							}
						]
					},{
						sublist:[
							{
								label:'T',
								skin:'items-blue'
							}
						]
					},
					{
						sublist:[
							{
								label:'X',
								skin:'items-red'
							}
						]
					},{
						sublist:[
							{
								label:'T',
								skin:'items-blue'
							}
						]
					},
					{
						sublist:[
							{
								label:'X',
								skin:'items-red'
							}
						]
					},
				],
				// 弹出
				quickcur: 0,
				currentRate:11,
				tabsquic: [{
					label: '+1K',
					value: '1000'
				}, {
					label: '+5K',
					value: '5000'
				}, {
					label: '+10K',
					value: '10000'
				}, {
					label: '+50K',
					value: '50000'
				}, {
					label: '+100K',
					value: '100000'
				}, {
					label: '+500K',
					value: '1000'
				}, {
					label: '+1M',
					value: '1000'
				}, {
					label: '+5M',
					value: '1000'
				}, {
					label: '+10M',
					value: '1000'
				}, {
					label: '+50M',
					value: '1000'
				}],
				betVal: '',
				fileList: [],

			}
		},
		computed: {
			text() {
				return this.currentRate.toFixed(0) + '%';
			},
			text2() {
				return this.currentRate.toFixed(0) + '%';
			},
		},
		methods: {
			url(url) {
				this.$router.push({
					path: url
				})
			},
			onClickLeft() {
				this.$router.go(-1)
			},
			toggleA(index) {
				var check = this.ballBoxA[index].check;
				this.ballBoxA[index].check = check === true ? false : true;
			},
			toggleB(index) {
				var check = this.ballBoxB[index].check;
				this.ballBoxB[index].check = check === true ? false : true;
			},
			toggleC(index) {
				var check = this.ballBoxC[index].check;
				this.ballBoxC[index].check = check === true ? false : true;
			},
			toggleD(index) {
				var check = this.ballBoxD[index].check;
				this.ballBoxD[index].check = check === true ? false : true;
				this.btmShow = true
				this.$nextTick(()=>{
					let box = this.$refs.scrollList
					box.scrollTop = box.scrollHeight
				})
			
			},
			
			onTabquic(e){
				this.betVal = e
			},
			cancel(){
				this.btmShow = false
				this.ballBoxA.forEach((item,index)=>{
					this.ballBoxA[index].check = false; 
				})
				this.ballBoxB.forEach((item,index)=>{
					this.ballBoxB[index].check = false; 
				})
				this.ballBoxC.forEach((item,index)=>{
					this.ballBoxC[index].check = false; 
				})
				this.ballBoxD.forEach((item,index)=>{
					this.ballBoxD[index].check = false; 
				})
			},
		}
	}
</script>
<style>
	/* 	.lottery-page .van-overlay{
		display: none;
	} */
</style>
